<template>
   <div style="background-color:silver; width:500px;margin-left: 570px;height: 450px;">
    <h1 style="font-weight: bold; text-align: center;margin-top: 50px;">确认缴费</h1>
    <div style="text-align: center; margin-top: 50px; ">
        <p style="margin-right:227px;">房间号:{{payconfirm.roomCode}}</p>
        <p style="margin-right:225px;">病人姓名:{{payconfirm.name}}</p>
        <p style="margin-right:200px;">病人编号:{{payconfirm.patientCode}}</p>
        <p style="margin-right:220px;">缴费金额:{{payconfirm.total}}元</p>
         <el-button style="margin-top: 50px; margin-right: 40px;" @click="cancelpay()">取消缴费</el-button>
        <el-button type="primary" style="margin-top: 50px;" @click="goawaypay(payRow)">立即缴费</el-button>
    </div>
   </div>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted, computed, onUnmounted} from 'vue'
import {useRouter, useRoute} from "vue-router"
import http from '@/api/http.js'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

//取消缴费
const cancelpay = () => {
   router.push("/PayInfo")
}

//定义支付数据对象
const payconfirm = reactive({
    id: "",
    officeCode: "",
    roomCode: "",
    name: "",
    patientCode: "",
    total: ""
})

let a = route.query.a ? JSON.parse(route.query.a as string) : null;
//显示页面
const getpayconfirm = () => {
    http.get("/api/PayConfirmController/ShowPayConfirm")
    .then(res => {
        Object.assign(payconfirm, a)
        console.log("支付详情数据:", payconfirm) // 检查id是否正确获取
        
        // 存储当前支付记录的ID，用于支付结果页面
        if (payconfirm.id) {
            localStorage.setItem('currentPaymentId', payconfirm.id)
        }
    })
}

// 创建支付数据对象
const payRow = computed(() => {
  return {
    id: payconfirm.id, // 记录ID，用于更新状态
    patientCode: payconfirm.patientCode || '1', // 使用病人编号作为交易号
    tradeNo: "214", // 使用病人编号作为交易号
    subject: `${payconfirm.name}的医疗费用`,  // 支付标题
    totalAmount: payconfirm.total || '0.01',  // 总金额
    body: `支付${payconfirm.name}的医疗费用`  // 支付详情
  };
});

// 支付状态更新处理函数
let handlePaymentReturn: (() => void) | null = null;

const goawaypay = (row: any) => {
  const payParams = {
    id: payconfirm.id, // 支付记录ID
    patientCode: row.patientCode,//患者编号       
    tradeNo: row.tradeNo,  // 默认交易号
    subject: row.subject,  // 默认支付标题
    totalAmount: row.totalAmount,  // 默认金额（1分钱）
    body: row.body  // 默认支付详情
  };

  // 存储关键数据到localStorage
  if (payParams.id) {
    localStorage.setItem('currentPaymentId', payParams.id)
  }
  if (payParams.patientCode) {
    localStorage.setItem('currentPatientCode', payParams.patientCode)
  }

  // 移除之前的事件监听器（如果存在）
  if (handlePaymentReturn) {
    window.removeEventListener('focus', handlePaymentReturn);
  }

  // 创建新的事件处理函数
  handlePaymentReturn = () => {
    // 延迟执行以确保用户已完成支付
    setTimeout(() => {
      // 检查支付是否成功 (这里需要有一个检查逻辑，但是简化为直接调用更新)
      updatePatientCodeState(payParams.patientCode);
      
      // 打开支付结果页面，并传递参数
      const resultUrl = `/PayResult?patientCode=${payParams.patientCode}`; 
      window.open(resultUrl, '_blank');
      
      // 移除事件监听器
      if (handlePaymentReturn) {
        window.removeEventListener('focus', handlePaymentReturn);
        handlePaymentReturn = null;
      }
    }, 1000);
  };

  window.addEventListener('focus', handlePaymentReturn);

  http.post("/api/PayconfigController/AlipaySubmit", payParams)
  .then(res => {
    if (typeof res === 'string') {
      if (res.includes('http') || res.includes('https')) {
        window.open(res, '_blank');
      } else {
        const payWindow = window.open('', '_blank');
        if (payWindow) {
          payWindow.document.write(res);
          payWindow.document.close();
        }
      }
    } else if (res && res.formHtml) {
      const payWindow = window.open('', '_blank');
      if (payWindow) {
        payWindow.document.write(res.formHtml);
        payWindow.document.close();
      }
    } else if (res && res.payUrl) {
      window.open(res.payUrl, '_blank');
    }
  })
  .catch(err => {
    console.error('支付失败:', err);
    ElMessage.error('支付发起失败');
    // 移除事件监听器
    if (handlePaymentReturn) {
      window.removeEventListener('focus', handlePaymentReturn);
      handlePaymentReturn = null;
    }
  });
};

//修改状态
const updatePatientCodeState = (orderNo:any) => {
  // 获取支付记录的ID
  const paymentId = payconfirm.id;
  
  if (!paymentId) {
    console.error('缺少支付记录ID，无法更新状态');
    return;
  }
  
  // 直接通过ID更新支付状态
  http.post(`api/PayConfirmController/UpdatePayStatus?id=${paymentId}&isPay=1`)
  .then(res => {
    console.log('支付状态更新成功:', res);
    // 同时通过orderNo更新，双保险
    http.post(`api/PayConfirmController/UpdatePaymentStatus?orderNo=${orderNo}&isPay=1`)
    .then(res2 => {
      console.log('通过orderNo更新状态结果:', res2);
    });
    // 设置刷新标记，以便列表页面知道需要刷新数据
    localStorage.setItem('refreshPaymentList', 'true');
    
    // 尝试直接刷新列表（如果在同一个session）
    try {
      if (window.opener && !window.opener.closed) {
        // 如果父窗口存在且未关闭，尝试调用父窗口的刷新方法
        window.opener.postMessage({ type: 'PAYMENT_SUCCESS', data: { id: paymentId } }, '*');
      }
    } catch (e) {
      console.log('通知父窗口失败:', e);
    }
  })
  .catch(err => {
    console.error('支付状态更新失败:', err);
  });
}

onMounted(() => {
  getpayconfirm();
});

// 组件卸载时清理事件监听器
onUnmounted(() => {
  if (handlePaymentReturn) {
    window.removeEventListener('focus', handlePaymentReturn);
    handlePaymentReturn = null;
  }
});
</script>